<template>
  <div>
    <div class="top">
      <div class="top_sousuo">
        <div class="ssk">
          <el-form :model="sousuo" label-width="80px" :inline="true">
            <el-form-item>
              <el-form-item label="学号">
                <el-input
                  v-model="sousuo.stuid"
                  placeholder="学号"
                  style="width: 100px"
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input
                  v-model="sousuo.stuname"
                  placeholder="姓名"
                  style="width: 100px"
                ></el-input>
              </el-form-item>
              <el-form-item label="班级">
                <el-input
                  v-model="sousuo.stuclass"
                  placeholder="班级"
                  style="width: 100px"
                ></el-input>
              </el-form-item>
              <el-form-item label="系别">
                <el-select
                  v-model="sousuo.studepart"
                  placeholder="系别"
                  style="width: 150px"
                >
                  <el-option
                    label="计算机工程学院"
                    value="计算机工程学院"
                  ></el-option>
                  <el-option label="物联网学院" value="物联网学院"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" @click="select()">搜索</el-button>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="dialogFormVisible = true"
          >添加学生</el-button
        >
      </div>
      <div>
        <el-button type="danger" @click="plshanchu()">批量删除</el-button>
      </div>
    </div>
    <!--增加 -->
    <div>
      <el-dialog title="学生信息" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-width="150px">
          <el-form-item label="学号" :label-width="formLabelWidth">
            <el-input v-model="form.stuid" autocomplete="off" />
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.stuname" autocomplete="off" />
          </el-form-item>
          <el-form-item label="班级" :label-width="formLabelWidth">
            <el-input v-model="form.stuclass" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学历" :label-width="formLabelWidth">
            <el-input v-model="form.stulevel" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学院" :label-width="formLabelWidth">
            <el-input v-model="form.studepart" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="form.stusex" autocomplete="off" />
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.stuother" autocomplete="off" />
          </el-form-item>
          <el-form-item label="图片" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              :action="$picbaserurl + '/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="form.stupic"
                :src="baseUrl + '/' + form.stupic"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false"> 取 消 </el-button>
          <el-button type="primary" @click="addstudent()"> 确 定 </el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑内容 -->
    <el-dialog title="学生信息" :visible.sync="dialogFormVisible1">
      <el-form :model="bjtext" label-width="150px">
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input
            v-model="bjtext.stuid"
            autocomplete="off"
            :readonly="true"
          />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="bjtext.stuname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input v-model="bjtext.stuclass" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth">
          <el-input v-model="bjtext.stulevel" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input v-model="bjtext.studepart" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="bjtext.stusex" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="bjtext.stuother" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            :action="baseUrl + '/upload'"
            :show-file-list="false"
            :on-success="bjSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="bjtext.stupic"
              :src="baseUrl + '/' + bjtext.stupic"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false"> 取 消 </el-button>
        <el-button type="primary" @click="updatastu()"> 确 定 </el-button>
      </div>
    </el-dialog>

    <!-- 表格 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="stuList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="stuid" label="学号" width="120" />
        <el-table-column prop="stuname" label="姓名" />
        <el-table-column prop="stulevel" label="学历" />
        <el-table-column prop="stuclass" label="班级" />
        <el-table-column prop="studepart" label="学院" />
        <el-table-column label="性别">
          <template slot-scope="scope">
            <div v-if="scope.row.stusex == 0">男</div>
            <div v-else>女</div>
          </template>
        </el-table-column>
        <el-table-column prop="stuother" label="备注" />
        <el-table-column prop="stupic" label="图片">
          <template slot-scope="scope">
            <img
              :src="baseUrl + '/' + scope.row.stupic"
              style="width: 70px; height: 70px"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="bj(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getstulist,
  addStudent,
  delstu,
  delstuList,
  updatastudent,
  finstudent,
} from "@/api/student";
export default {
  name: "Student",
  data() {
    return {
      formLabelWidth: "",
      stuList: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        stuid: "",
        stuname: "",
        stuclass: "",
        stulevel: "",
        studepart: "",
        stusex: "",
        stuother: "",
        stupic: "",
      },
      baseUrl: this.$baseUrl,
      multipleSelection: [],
      bjtext: {},
      sousuo: {
        stuid: "",
        stuname: "",
        stuclass: "",
        studepart: "",
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getstulist().then((Res) => {
        this.stuList = Res.data;
      });
    },
    handleClick(row) {
      delstu(row.stuid).then((Res) => {
        console.log(Res.msg);
      });
      this.getData();
    },
    addstudent() {
      addStudent(this.form).then((Res) => {
        console.log(Res.msg);
      });
      this.dialogFormVisible = false;
      this.getData();
      location.reload();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    plshanchu() {
      delstuList(this.multipleSelection).then((Res) => {
        console.log(Res.msg);
      });
      this.getData();
      location.reload();
    },
    bj(val) {
      this.bjtext = val;
      this.dialogFormVisible1 = true;
    },
    updatastu() {
      updatastudent(this.bjtext).then((res) => {
        console.log(res.msg);
      });
      this.getData();
      this.dialogFormVisible1 = false;
      location.reload();
    },
    select() {
      
      // console.log(this.sousuo.region);
      // if (this.sousuo.region == "stuid") {
      //   bd = {
      //     stuid: this.sousuo.text,
      //   };
      // }
      // if (this.sousuo.region == "stuname") {
      //   bd = {
      //     stuname: this.sousuo.text,
      //   };
      // }
      // if (this.sousuo.region == "stuclass") {
      //   bd = {
      //     stuclass: this.sousuo.text,
      //   };
      // }
      // if (this.sousuo.region == "studepart") {
      //   bd = {
      //     studepart: this.sousuo.text,
      //   };
      // }
      finstudent(this.sousuo).then((Res) => {
        console.log(Res.msg);
        this.stuList = Res.data;
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.stupic = res.data;
      console.log(this.form.stupic);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    bjSuccess(res, file) {
      this.bjtext.stupic = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: flex;
}
.top > div {
  margin-left: 15px;
}
.top_sousuo {
  display: flex;
}
.top_sousuo > div {
  margin-left: 15px;
}
.ssk {
  display: flex;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
